<template>
	<view class="content">
		<view class="classiftTOP">
			<view class="classiftTOPl">
				<view class="classiftTOPln classiftBut">书架</view>
				<view class="classiftTOPlv">浏览历史</view>
			</view>
		</view>
		<scroll-view 
			scroll-y="true" 
			:show-scrollbar="false">
			<view  class="Book">
				<view v-for="(book , index) in bookList.book" :key="index" class="Bookf" @click="booksPage(book.id)">
					<view class="Bookfi">
						<img :src="book.imgUrl" alt="">
					</view>
					<view class="Bookfn">
						{{ book.name }}
					</view>
					<view class="Bookfname">
						{{ book.authorName }}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import books from '@/assets/json/book/books.json'
	export default {
		data() {
			return {
				bookList: books,
			}
		},
		onLoad() {

		},
		methods: {
			booksPage(e){
				console.log(e)
				uni.navigateTo({
					url: '../books/books?id='+ e
				});
			}
		}
	}
</script>

<style lang="less">
.content {
	position: relative;
	background-color: #fafafa;
}
.classiftTOP {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100vw;
	height: 15vh;
	box-sizing: border-box;
	background-color: #fafafa;
	padding-bottom: 5vw;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	.classiftTOPl {
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		width: 40vw;
		font-size: 14px;
		color: #999999;
		.classiftTOPln {
			margin-left: 5vw;
		}
		.classiftBut {
			font-size: 22px;
			color: #000000;
			font-weight: bold;
		}
	}
}
.Book{
	margin-top: 15vh;
	height: 75vh;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding-left: 5vw;
	padding-right: 5vw;
	.Bookf{
		width: 25vw;
		margin-top: 4vw;
		.Bookfi{
			width: 25vw;
			height: 36vw;
			img{
				width: 25vw;
				height: 36vw;
			}
		}
		.Bookfn{
			font-size: 12px;
			overflow: hidden;
			text-overflow: ellipsis;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
			margin-top: 3vw;
			height: 9vw;
		}
		.Bookfname{
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			color: #999999;
			font-size: 12px;
		}
	}
	
}
</style>
